<template>
  <a
    :href="url"
    class="github-btn"
    target="_blank"
    rel="noopener noreferrer"
    :style="{ '--btn-size': size }"
  >
    <svg class="icon" viewBox="0 0 1024 1024" width="1em" height="1em" aria-hidden="true">
      <path
        fill="currentColor"
        d="M511.6 76C264.6 76 64 276.6 64 523.6c0 197.2 128 364.6 305.2 423.8 22.4 4.2 30.6-9.6 30.6-21.4 0-10.6-0.4-45.4-0.6-82.4-124.2 27-150.4-52.2-150.4-52.2-20.4-51.8-49.8-65.6-49.8-65.6-40.8-27.8 3.2-27.2 3.2-27.2 45.2 3.2 69 46.4 69 46.4 40.2 68.8 105.4 48.9 131.2 37.4 4.1-29.1 15.7-48.9 28.6-60.2-99.2-11.3-203.6-49.6-203.6-220.8 0-48.8 17.4-88.8 45.8-120.1-4.6-11.3-19.8-56.8 4.4-118.5 0 0 37.3-12 122.2 45.9 35.5-9.9 73.6-14.8 111.5-15 37.8 0.2 76 5.1 111.5 15 84.8-57.9 122.1-45.9 122.1-45.9 24.3 61.7 9.1 107.2 4.5 118.5 28.5 31.3 45.7 71.3 45.7 120.1 0 171.7-104.6 209.4-204.1 220.5 16.1 13.9 30.4 41.3 30.4 83.3 0 60.2-0.5 108.7-0.5 123.5 0 11.9 8 25.8 30.7 21.4C832 888.1 960 720.7 960 523.6 960 276.6 759.4 76 511.6 76z"
      />
    </svg>
    <span class="text"><slot>Github</slot></span>
  </a>
</template>

<script setup>
/**
 * GithubButton 全局按钮组件
 * @prop {String} url - Github链接
 * @prop {String|Number} size - 按钮尺寸，默认40px
 */
defineProps({
  url: { type: String, required: true },
  size: { type: [String, Number], default: '40px' },
})
</script>

<style scoped>
.github-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1.2em;
  height: var(--btn-size, 40px);
  font-size: 1em;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-light);
  text-decoration: none;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base);
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.github-btn:hover {
  background: var(--color-primary);
  opacity: 0.85;
  box-shadow: var(--shadow-medium);
}
.icon {
  font-size: 1.2em;
  vertical-align: middle;
}
.text {
  font-size: 1em;
  font-family: inherit;
}
@media (max-width: 600px) {
  .github-btn {
    height: 36px;
    font-size: 0.95em;
    padding: 0 1em;
  }
}
</style>
